<template>
	<el-dialog
		:close-on-click-modal="false"
		:destroy-on-close="true"
		:title="form.enableId ? $t('common.editBtn') : $t('common.addBtn')"
		draggable
		v-model="visible"
		width="65%"
		@close="onCancel"
	>
		<el-form :model="form" :rules="dataRules" formDialogRef label-width="120px" ref="dataFormRef" v-loading="loading">
			<el-row :gutter="20" style="margin-left: -80px !important">
				<el-col :span="6" class="mb20">
					<el-form-item label="名称" prop="enableName">
						<el-input :disabled="form.enableId == '' ? false : true" placeholder="请输入名称" v-model="form.enableName" />
					</el-form-item>
				</el-col>
				<el-col :span="6" class="mb20">
					<el-form-item label="别名" prop="byName">
						<el-input :disabled="form.enableId == '' ? false : true" placeholder="请输入名称" v-model="form.byName" />
					</el-form-item>
				</el-col>
				<el-col :span="6" class="mb20 select_width" v-if="statusType != 'enable'">
					<el-form-item label="告警配置" prop="typeCode" style="width: 335px">
						<!-- <div v-for="(ot,index) in form.typeCode" :key="index"> -->
						<el-select v-model="form.typeCode" multiple filterable placeholder="请选择告警配置" style="width: 300px">
							<el-option :key="index" :label="item.typeName" :value="item.typeCode" v-for="(item, index) in alarmConfigOptions"></el-option>
						</el-select>
						<!-- </div> -->
					</el-form-item>
				</el-col>
				<el-col :span="6" class="mb20 select_width" v-if="statusType == 'enable'">
					<el-form-item label="能耗跑高" prop="flag1" style="width: 335px">
						<!-- <div v-for="(ot,index) in form.typeCode" :key="index"> -->
						<el-select v-model="form.flag1Data" filterable placeholder="请选择能耗跑高" style="width: 300px">
							<el-option :key="index" :label="item.typeName" :value="item.typeCode" v-for="(item, index) in alarmConfigOptions"></el-option>
						</el-select>
						<!-- </div> -->
					</el-form-item>
				</el-col>
				<el-col :span="6" class="mb20 select_width" v-if="statusType == 'enable'">
					<el-form-item label="能耗跑低" prop="flag0" style="width: 335px">
						<!-- <div v-for="(ot,index) in form.typeCode" :key="index"> -->
						<el-select v-model="form.flag0Data" filterable placeholder="请选择能耗跑低" style="width: 300px">
							<el-option :key="index" :label="item.typeName" :value="item.typeCode" v-for="(item, index) in alarmConfigOptions"></el-option>
						</el-select>
						<!-- </div> -->
					</el-form-item>
				</el-col>
				<el-col :span="statusType != 'enable' ? 5 : 6" class="mb20" style="margin-left: 15px">
					<el-form-item label="触发机制" prop="type">
						<el-select v-model="form.type" placeholder="请选择触发机制" @change="handleChange($event)">
							<el-option label="间隔触发" value="0"></el-option>
							<el-option label="立即触发" value="1"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="statusType != 'enable' ? 5 : 6" class="mb20" v-if="mechanismNum == 0">
					<el-form-item label="触发次数" prop="num" style="width: 300px">
						<el-input-number placeholder="请输入触发次数" v-model="form.num" :min="0" @change="changeIntervalTimeMax" :max="9999999">
						</el-input-number>
					</el-form-item>
				</el-col>
				<!-- <el-col :span="6" class="mb20" v-if="mechanismNum == 0">
					<el-form-item label="间隔时间" prop="intervalTime">
						<el-input placeholder="请输入间隔时间" v-model="form.intervalTime" />
					</el-form-item>
				</el-col> -->
			</el-row>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="onCancel">{{ $t('common.cancelButtonText') }}</el-button>
				<el-button @click="onSubmit" type="primary" :disabled="loading">{{ $t('common.confirmButtonText') }}</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts" name="SysOauthClientDetailsDialog" setup>
import { useDict } from '/@/hooks/dict';
import { useMessage } from '/@/hooks/message';
import { addObj, getDetails, putObj, queryAlarmTypeConf } from '/@/api/alarm/enable';
import { useI18n } from 'vue-i18n';
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
const { t } = useI18n();
// 定义变量内容
const dataFormRef = ref();
const visible = ref(false);
const loading = ref(false);
const service = ref([]);
// 定义字典
const { grant_types, common_status, captcha_flag_types, enc_flag_types } = useDict(
	'grant_types',
	'common_status',
	'captcha_flag_types',
	'enc_flag_types'
);

// 提交表单数据
var form = reactive({
	enableId: '',
	enableName: '', // 名称
	byName: '', // 别名
	typeCode: [], // 告警配置

	flag0Data: '', // 跑低
	flag1Data: '', // 跑高

	type: '1', // 触发机制
	num: '', // 触发次数
	// intervalTime: '', // 间隔时间
	openOrClose: '0', //开关
});

// 定义校验规则
const dataRules = ref({
	enableName: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
	byName: [{ required: true, message: '别名不能为空', trigger: 'blur' }],
	typeCode: [{ required: true, message: '请选择告警配置', trigger: 'change' }],
	type: [{ required: true, message: '请选择触发机制', trigger: 'change' }],
});
const alarmConfigOptions = ref([]);
const getAlarmConfigOptions = () => {
	queryAlarmTypeConf().then((res) => {
		alarmConfigOptions.value = res.data.records.map((item) => {
			item.id = item.id + '';
			return { ...item };
		});
	});
};
// 打开弹窗
const openDialog = (enableId: string) => {
	visible.value = true;
	getAlarmConfigOptions();
	form.enableId = '';
	// 重置表单数据
	nextTick(() => {
		dataFormRef.value?.resetFields();
	});
	if (enableId) {
		form.enableId = enableId;
		getsysOauthClientDetailsData(enableId);
	}
};
const mechanismNum = ref('1');
const handleChange = (val: string) => {
	mechanismNum.value = val;
};
// 提交
const onSubmit = async () => {
	var objDataList = [];
	if (statusType == '' || statusType !== 'enable') {
		form.typeCode.map((item) => {
			var obj = {};
			obj.typeCode = item;
			objDataList.push(obj);
		});
	} else {
		dataList.alarmEnableBindList.map((item) => {
			if (item.flag == '0') {
				var obj = {};
				obj.typeCode = form.flag0Data;
				obj.flag = item.flag;
				objDataList.push(obj);
			} else {
				var obj = {};
				obj.typeCode = form.flag1Data;
				obj.flag = item.flag;
				objDataList.push(obj);
			}
		});
	}
	var objData = {
		enableId: form.enableId,
		enableName: form.enableName, // 名称
		byName: form.byName, // 别名
		type: Number(form.type),
		num: form.num,
		// intervalTime: form.intervalTime,
		openOrClose: form.openOrClose,
		alarmEnableBindList: objDataList,
	};

	const valid = await dataFormRef.value.validate().catch(() => {});
	if (!valid) return false;
	try {
		loading.value = true;
		form.enableId ? await putObj(objData) : await addObj(objData);
		useMessage().success(t(form.enableId ? 'common.editSuccessText' : 'common.addSuccessText'));
		visible.value = false;
		emit('refresh');
	} catch (err: any) {
		useMessage().error(err.msg);
		loading.value = false;
	} finally {
		loading.value = false;
	}
};
const route = useRoute();
const router = useRouter();
onMounted(() => {});
// 新增 / 编辑  取消按钮清空事件
const onCancel = () => {
	nextTick(() => {
		dataFormRef.value?.resetFields();
		mechanismNum.value = '1';
		form.enableId = '';
		form.enableName = ''; // 名称
		form.byName = ''; // 别名
		form.typeCode = []; //
		form.type = '1';
		form.num = '';
		statusType = '';
		// form.intervalTime = '';
		form.openOrClose = '0';
		form.flag0Data = '';
		form.flag1Data = '';
	});
	visible.value = false;
};
// 初始化表单数据 - 详情
var statusType = '';
var dataList = [];
const getsysOauthClientDetailsData = (enableId: string) => {
	loading.value = true;
	getDetails(enableId).then((res: any) => {
		var oppoData = [];
		res.data.alarmEnableBindList.map((item) => {
			var oppoObj = {};
			oppoObj = item.typeCode;
			oppoData.push(oppoObj);
			if (item.flag == '0') {
				form.flag0Data = item.typeCode;
			} else if (item.flag == '1') {
				form.flag1Data = item.typeCode;
			}
		});
		mechanismNum.value = res.data.type.toString();
		form.enableId = res.data.enableId;
		form.enableName = res.data.enableName; // 名称
		form.byName = res.data.byName; // 别名
		form.typeCode = oppoData; //
		form.type = res.data.type.toString();
		form.num = res.data.num;
		// form.intervalTime = res.data.intervalTime;
		form.openOrClose = res.data.openOrClose;
		statusType = form.byName;
		dataList = res.data;

		loading.value = false;
	});
};

// 暴露变量
defineExpose({
	openDialog,
});
</script>
<style lang="scss" scoped>
.box {
	display: flex;
	// align-items: center;
	.chufaqi {
		width: 93%;
		background-color: #f0f0f0;
		padding: 4px;
		margin-bottom: 5px;
		border-radius: 4px;
	}
}
.trigger_title {
	padding: 5px 10px;
	color: #000;
}
.box_del {
	cursor: pointer;
	margin-left: -70px;
	// color: #fff;
	width: 80px;
}
.box_add {
	cursor: pointer;
	margin: 2px 0 2px 0;
	// color: #32cd99;
	display: inline-block;
}
.shaixuan_select {
	display: flex;
	align-items: center;
	margin-bottom: 5px;
	.manzu {
		margin: 0 10px 0 15px;
	}
	.tiaojian {
		margin-left: 10px;
	}
}
::v-deep .el-select__wrapper {
	// background-color: red;
	//background-color: var(--el-fill-color-blank);
}
.special_time {
	margin-top: 10px;
	display: flex;
	align-items: center;
	.special_del {
		margin-left: 10px;
		cursor: pointer;
	}
}
.title_name {
	display: flex;
	justify-content: space-between;
	width: 92%;
}
.mb20 {
	margin-bottom: -2px !important;
}
::v-deep .el-row {
	margin-left: -120px !important;
	margin-right: 100px !important;
}
::v-deep .el-form-item__label {
	// color: #fff !important;
}
::v-deep .el-form-item {
	width: 320px;
}
.select_width {
	::v-deep .el-select__tags-text {
		width: 40px;
	}
}
</style>
